<template>
	<view class="content">
		<!-- 近一周利润 -->
		<qiun-data-charts v-if="isWeekSelected" type="line" :chartData="weekData"></qiun-data-charts>
		<!-- 近一月利润 -->
		<qiun-data-charts v-if="!isWeekSelected" type="line" :chartData="monthData"></qiun-data-charts>
		<view class="control">
			<uni-tag text="近一周利润" :inverted="!isWeekSelected" type="primary" @click="chose_charts('week')"></uni-tag>
			<uni-tag text="近一月利润" :inverted="isWeekSelected" type="primary" @click="chose_charts('month')"></uni-tag>
		</view>
	</view>
</template>

<script setup>
	import {
		api_settlementItem_getProfit
	} from "../../../../apis/apis.js";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref
	} from 'vue';
	import uCharts from "../../../../uni_modules/u-charts/config-ucharts.js";
	import dayjs from 'dayjs';

	const weekData = ref({});
	const monthData = ref({});
	const isWeekSelected = ref(true); // 默认显示近一周利润

	const formatData = (rawData) => {
		const categories = Object.keys(rawData).sort((a, b) => dayjs(a).diff(dayjs(b)));
		const seriesData = categories.map(date => rawData[date]);
		return {
			categories: categories,
			series: [{
				name: "利润",
				data: seriesData
			}]
		};
	};


	//控制显示哪张图表
	const chose_charts = (type) => {
		if (type === 'week') {
			isWeekSelected.value = true;
		} else if (type === 'month') {
			isWeekSelected.value = false;
		}
	};


	onLoad(async () => {
		//加载统计数据
		try {
			let res = await api_settlementItem_getProfit();
			weekData.value = formatData(res.data.week);
			monthData.value = formatData(res.data.month);

			console.log(weekData.value);
			console.log(monthData.value);
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}
	});
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.control {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-top: 20rpx;
		}
	}
</style>